import {html, LitElement, TemplateResult} from "lit";
import {customElement, property} from "lit/decorators.js";
import * as echarts from "echarts";
import style from '../echarts.css.ts';

export interface MultipleXLineProps {
    chartId?: string;
    width?: string;
    height?: string;
    colors?: string[];
    legend?: string[];
    label?: string;
    xAxisData?: string[][];
    seriesData?: number[][];
}

@customElement('lit-multiple-x-line')
export class LitMultipleXLine extends LitElement {
    @property({ type: String }) chartId: string = 'lit-multiple-x-line-chart';
    @property({ type: String }) width: string = '600px';
    @property({ type: String }) height: string = '400px';
    @property({ type: Array }) legend: string[] = ['Precipitation(2015)', 'Precipitation(2016)'];
    @property({ type: String }) label: string = 'Precipitation';
    @property({ type: Object }) colors: string[] = ['#5470C6', '#EE6666'];
    @property({ type: Array }) xAxisData: string[][] = [
        ['2015-1', '2015-2', '2015-3', '2015-4', '2015-5', '2015-6', '2015-7', '2015-8', '2015-9', '2015-10', '2015-11', '2015-12'],
        ['2016-1', '2016-2', '2016-3', '2016-4', '2016-5', '2016-6', '2016-7', '2016-8', '2016-9', '2016-10', '2016-11', '2016-12']
    ];
    @property({ type: Array }) seriesData: number[][] = [
        [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
        [3.9, 5.9, 11.1, 18.7, 48.3, 69.2, 231.6, 46.6, 55.4, 18.4, 10.3, 0.7]
    ];

    getXAxis(): any[] {
        const label = this.label;
        return this.xAxisData.map((data, index) => ({
            type: 'category',
            axisTick: {
                alignWithLabel: true
            },
            axisLine: {
                onZero: false,
                lineStyle: {
                    color: this.colors[index]
                }
            },
            axisPointer: {
                label: {
                    formatter: function (params: any) {
                        return (
                            `${label}  ` +
                            params.value +
                            (params.seriesData.length ? '：' + params.seriesData[0].data : '')
                        );
                    }
                }
            },
            data: data
        }));
    }

    getSeries(): any[] {
        return this.seriesData.map((data, index) => ({
            name: this.legend[index] || undefined,
            type: 'line',
            smooth: true,
            xAxisIndex: index,
            emphasis: {
                focus: 'series'
            },
            data: data
        }));
    }

    option: echarts.EChartsOption = {
        color: this.colors,
        tooltip: {
            trigger: 'none',
            axisPointer: {
                type: 'cross'
            }
        },
        legend: {},
        grid: {
            top: 70,
            bottom: 50
        },
        xAxis: this.getXAxis(),
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: this.getSeries()
    }

    static styles = style;

    updated() {
        this.option.color = this.colors;
        (this.option.xAxis as any) = this.getXAxis();
        (this.option.series as any) = this.getSeries();
        this.firstUpdated();
    }

    firstUpdated() {
        const chart = echarts.init(this.shadowRoot!.getElementById(this.chartId)!);
        chart.setOption(this.option);
    }

    render(): TemplateResult {
        return html`<div id="${this.chartId}" style="width: ${this.width}; height: ${this.height};"></div>`;
    }
}

declare global {
    interface HTMLElementTagNameMap {
        'lit-multiple-x-line': LitMultipleXLine;
    }
}